<template>
	<view class="wrap">
		<view class="list">
			<template v-if="articleList.length">
				<view
					class="list-item"
					v-for="item in articleList"
					:key="item.id"
					@click="detailClick(item)"
				>
					<image :src="item.img2" class="list-item-r" mode="aspectFill"></image>
					<u-text
						:text="item.title"
						block
						lines="2"
						color="#333"
						size="28rpx"
						margin="22rpx 6rpx 0"
					></u-text>
				</view>
				<u-loadmore :status="status" line />
			</template>
			<u-empty mode="data" marginTop="300rpx" v-else text="暂无新闻"> </u-empty>
		</view>
	</view>
</template>

<script>
const app = getApp()
export default {
	data() {
		return {
			imgUrl: app.globalData.ossUrl,
			page: 1,
			articleList: [],
			status: 'loadmore'
		}
	},
	onLoad() {
		this.articleList = []
		this.getArticleData()
	},
	onReachBottom() {
		if (this.status !== 'nomore') {
			this.page++
			this.getArticleData()
		}
	},
	methods: {
		getArticleData() {
			uni.showLoading({
				title: '数据加载中~'
			})
			this.status = 'loading'
			this.$https(
				false,
				'get',
				{
					url: '/race/article/list/' + this.page
				},
				(res) => {
					this.articleList = this.articleList.concat(res.data)
					this.status = res.data.length > 9 ? 'loadmore' : 'nomore'
				}
			)
		},
		detailClick(item) {
			// type：0=无跳转，1=自定义落地页，2=公众号链接，3=赛事助手详情页
			if (item.type === 1) {
				uni.navigateTo({
					url: '/pages/news/detail?id=' + item.id
				})
			} else if (item.type === 2) {
				console.log('打开公众号链接页面')
				uni.navigateTo({
					url: '/pages/webview/webview?url=' + item.addr
				})
			} else if (item.type === 3) {
				uni.navigateTo({
					url: '/pages/saishi/detail?id=' + item.link
				})
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.wrap {
	width: 100%;
	min-height: 100vh;
	position: relative;
}
.list {
	padding: 24rpx 26rpx 10rpx;
	&-item {
		background-color: #fff;
		margin-bottom: 20rpx;
		padding: 20rpx 16rpx;
		&-r {
			display: block;
			width: 100%;
			height: 240rpx;
		}
	}
}
</style>
